<template>
	<view class="content columnbox wdh-100 jus">
		<!-- <view class="rowbox spb one-info">
			<view class="selectbtn def-bgcol" @click="authSearchUser">
				<u-icon size="14" color='#fff' name="plus"></u-icon>
				<view class="" style="margin-left: 10rpx;">
					选择会员
				</view>

			</view>
		</view> -->

		<view class="columnbox wdh-100 one-info">
			<view class="rowbox wdh-100 spb">
				<view class="info-title">消费总额</view>
			</view>

			<view class="rowbox wdh-100 jus price-box">
				¥ <input placeholder="请输入支付金额" v-model="price" />
			</view>
		</view>
		<!-- <view class="zhekou">
			<view class="label">
				折扣后金额：
			</view>
			<view class="val" v-if="!zhekoouPrice">
				-
			</view>
			<view class="val red" v-else>
				{{zhekoouPrice||'-'}}
			</view>

		</view> -->
		<!-- <view class="rowbox def-bgcol pay-btn" @click="handleSubmit">确认收款</view> -->
		<view class="rowbox def-bgcol pay-btn2" @click="authSave">扫码收款</view>

		<view class=" wdh-100  warpcont">
			<view class="titcont">
				<view class="left">
					收款记录
				</view>

			</view>

			<view class="sklist" v-if="sklist.length">
				<view class="skitem" v-for="(item,index) in sklist" :key="index">
					<view class="item-top">

						<view class="top-right">
							<view class="name">
								{{item.title}}
							</view>
							<view class="bot">
								<view class="citem">
									<view class="label">
										收款时间：
									</view>
									<view class="val">
										{{formatTime(item.addtime)}}
									</view>
								</view>

							</view>

						</view>
					</view>
					<view class="pricecont">
						<view class="price">
							+￥{{item.price}}
						</view>
					</view>
				</view>
			</view>

			<view class="none" v-else>
				<u-empty text="暂无记录" mode="list"></u-empty>
			</view>




		</view>
		<u-popup mode="center" :show="searchflag" round="10" closeable @close="cancelAdd">
			<view class="add-box">
				<view class="searchcont">
					<view class="left-search">
						<u-icon name="search" size="40rpx"></u-icon>
						<input v-model="phone" class="search-input" placeholder="收款人手机号" />
						<view class="clearcont" @click="clearPhone">
							<u-icon name="close" color="#999" size="14"></u-icon>
						</view>
					</view>
					<view @click="phoneSearch" class="rowbox def-bgcol search-btn">搜索</view>
				</view>
				<view class="have" v-if="vipList.length">
					<scroll-view class="vip-cont" scroll-y="true" style="height: 600rpx;" @scrolltolower="loadVipList">
						<view class="vip-list">
							<view class="vip-item" v-for="(item,index) in vipList" :key="index"
								@click="handleSelectVip(item)">
								<view class="top">
									<view class="name">
										{{item.nickname}}
									</view>
									<view class="sele">
										选择
									</view>
								</view>
								<view class="middle">
									<view class="num mitem">
										{{item.phone}}
									</view>
									<view class="price mitem">
										￥{{item.price}}
									</view>
									<view class="kou mitem">
										{{(item.zhekou||0)/100===1?0:((item.zhekou||0)/100)*10}}折
									</view>
								</view>
							</view>
							<u-loadmore marginBottom="30" fontSize="12" :status="status" />
						</view>

					</scroll-view>
				</view>
				<view class="none" v-else>
					暂无会员
				</view>

			</view>
		</u-popup>
		<!-- 安卓首次购买强 -->
		<u-popup round="8" :show="andrFirstBuyPop" @close="andrFirstBuyPop=false" mode="center">
			<view class="firstBuyPop">
				<view class="close" @click="andrFirstBuyPop=false">
					<u-icon name="close-circle" color="#fff" size="32"></u-icon>
				</view>
				<view class="top">

					<view class="imgcont">
						<image :src="firstBuyInfo.images" mode="widthFix" class="img"></image>
					</view>
					<!-- <view class="tit">
						{{buyInfo.auth.sktitle}}
					</view> -->
					<!-- <view class="name namecenter">
						{{firstBuyInfo.title}}
					</view> -->
				</view>


				<view class="footer-btn ">
					<view class="btn confirmbtn" @click="handleAndrFirstBuy">
						{{firstBuyInfo.name}}
					</view>
					<!-- <view class="btn" @click="andrFirstBuyPop=false">
						关闭
					</view> -->
				</view>
			</view>
		</u-popup>
		<!-- 安卓购买套餐强 -->
		<u-popup round="8" :show="andrRenewBuyPop" @close="andrRenewBuyPop=false" mode="center">
			<view class="rewBuyPop">
				<view class="close" @click="andrRenewBuyPop=false">
					<u-icon name="close-circle" color="#fff" size="32"></u-icon>
				</view>
				<view class="top">

					<view class="imgcont">
						<image :src="taocanimage" mode="widthFix" class="img"></image>
					</view>
					<!-- <view class="tit">
						{{buyInfo.auth.sktitle}}
					</view> -->
					<view class="cloum-cont">
						<!-- <view class="cloum" v-for="(item,index) in taocanList" :key="index" @click="handleRenew(item)">
							<view class="left">
								{{item.name}}
							</view>
							<view class="right">
								<view class="price">
									￥{{item.price}}
								</view>
								<view class="yuan">
									￥{{item.originalprice}}
								</view>
							</view>
						</view> -->
						<view class="cloum" v-for="(item,index) in taocanList" :key="index" @click="handleRenew(item)">
							<image v-if="item.tuijian==1" class="package-img" src="/static/img/package-bg.jpg"
								mode="widthFix"></image>
							<image v-else-if="item.tuijian==2" class="package-img" src="/static/img/packageo.png"
								mode="widthFix"></image>
							<image class="tuijian-icon" v-if="item.tuijian==2" src="/static/img/packager.png"
								mode="widthFix"></image>
							<view class="package-info">
								<view class="package-detail">
									<view class="package-price">
										<text>￥</text>
										{{item.price}}
									</view>
									<view class="originalprice">
										<view>限时优惠</view>
										<text>{{item.originalprice}}</text>
									</view>
									<view class="package-name">{{item.name}}</view>
								</view>
								<view class="package-buy">立即抢购</view>
								<!-- <view class="left">
									{{item.name}}
								</view>
								<view class="right">
									<view class="price">
										￥{{item.price}}
									</view>
									<view class="yuan">
										￥{{item.originalprice}}
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>


				<!-- <view class="footer-btn btncenter">

					<view class="btn" @click="andrRenewBuyPop=false">
						关闭
					</view>
				</view> -->
			</view>
		</u-popup>
		<!-- 苹果购买客服强 -->
		<u-popup round="8" :show="iosQtxPop" @close="iosQtxPop=false" mode="center">
			<view class="phonePop">
				<view class="name namecenter">
					{{buyInfo.auth.sktitle}}
				</view>
				<view class="imgcont">
					<image :src="ma" mode="widthFix" class="img"></image>
				</view>
				<view class="footer-btn btncenter">
					<view class="btn" @click="iosQtxPop=false">
						关闭
					</view>
				</view>
			</view>
		</u-popup>
		<view class="">
			<u-popup round="8" :show="showPhonePop" @close="showPhonePop=false" mode="center">
				<view class="phonePop2">
					<view class="tit">
						请联系客服配置收款商户号
					</view>

					<view class="footer-btn ">
						<button class="btn confirmbtn" open-type="contact">
							联系客服
						</button>
						<view class="btn" @click="showPhonePop=false">
							取消
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import auth from '@/utils/auth.js'
	import _ from 'lodash';
	import IosKefu from '@/components/ioskefu.vue'
	export default {
		components: {
			IosKefu
		},
		data() {
			return {
				showPhonePop: false,
				matype: 'skimg',
				showIosKefu: false,
				showWeekNotice: false,
				sklist: [],
				taocanimage: '',
				isIos: false,
				activeTaocan: '',
				taocanList: [],
				andrRenewBuyPop: false,
				andrFirstBuyPop: false,
				firstBuyInfo: '',
				iosQtxPop: false,
				ma: '',
				buyInfo: '',
				baseInfo: '',
				storeinfo: null,
				price: '',
				phone: '',
				user: null,
				searchflag: false,
				payuser: null,
				currentPage: 1,
				pageSize: 5,
				totalPage: 0,
				status: 'nomore',
				vipList: [],
				shareinfo: null
			};
		},
		onShareAppMessage() {
			let path = 'pages/payment/payment?pid=' + uni.getStorageSync('uid')
			return {
				title: this.shareinfo.title,
				imageUrl: this.shareinfo.image,
				path: path
			}
		},
		onShareTimeline() {
			let path = '/pages/index/payment?pid=' + uni.getStorageSync('uid')
			return {
				title: this.shareinfo.title,
				imageUrl: this.shareinfo.image,
				path: path,
				success: res => {
					console.log('分享成功', res)
				}
			}
		},
		computed: {
			zhekoouPrice() {
				let price = ''
				if (this.price && this.storeinfo && this.storeinfo.zhekou) {
					let zhe = this.storeinfo.zhekou / 100
					let v = _.multiply(this.price, zhe)
					price = Math.floor(v * 100) / 100
				}
				return price
			},
			formatTime() {
				return function(val) {
					return dayjs.unix(val).format('YYYY-MM-DD HH:mm:ss')
				}
			}
		},
		onLoad() {
			this.getShareInfo()
		},
		onShow() {
			const info = wx.getSystemInfoSync()
			this.isIos = !(info.system.indexOf('Android') > -1)
			this.initNotice()
			this.getStoreInfo()
			this.getFirstBuyInfo()
			this.getma()
			this.getDataList()
		},
		methods: {
			getShareInfo() {
				this.$req.post('/shanghu/zhuanfafk').then(res => {
					this.shareinfo = res.data.data
				})
			},
			closeIosKefu() {
				this.showIosKefu = false
			},
			getDataList() {


				this.$req.post('/shanghu/shoukuan', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid || '',
					pageNo: 1,
					pageSize: 10
				}).then(res => {

					let info = res.data

					this.sklist = info.data.data || []

				})
			},
			handleGoskrecord() {
				if (uni.getStorageSync('uid')) {
					if (uni.getStorageSync('userInfo').shanghuid == 0) {
						uni.navigateTo({
							url: '/pages/iden/iden'
						})
					} else {
						uni.navigateTo({
							url: '/pages/collectionrecord/collectionrecord'
						})
					}

				} else {
					uni.navigateTo({
						url: '/pages/log/log'
					})
				}
			},
			getTongji() {
				this.$req.post('/shanghu/baobiao', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid
				}).then((res) => {
					this.tongjiInfo = res.data.data
				})
			},
			async initNotice() {
				const info = wx.getSystemInfoSync()
				let res = await this.haveAuth()

				if (info.system.indexOf('Android') > -1) {

					if (res.auth.sktx === 1) {
						let flag = true
						if (uni.getStorageSync('skendtime')) {
							var ctime = new Date().getTime()
							if (ctime > uni.getStorageSync('skendtime')) {
								uni.removeStorageSync('skendtime')
							} else {
								flag = false
							}
						}
						if (res.auth.sk === 1 && res.auth.skinttime === 0) {
							this.andrFirstBuyPop = flag
						}
						if (res.auth.sk === 1 && res.auth.skinttime > 0) {
							this.andrRenewBuyPop = flag
							if (flag) {
								this.getTaocan(1)
							}
						}
						if (!uni.getStorageSync('skendtime')) {
							let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 *
								1000 - 1); // 当天23:59
							uni.setStorageSync('skendtime', endTime)
						}

					} else {
						this.andrFirstBuyPop = false
						this.andrRenewBuyPop = false
					}
				} else {

					let flag = true
					if (uni.getStorageSync('skendtime')) {
						var ctime = new Date().getTime()
						if (ctime > uni.getStorageSync('skendtime')) {
							uni.removeStorageSync('skendtime')
						} else {
							flag = false
						}
					}

					if (res.auth.sktx === 1) {
						this.showIosKefu = flag
					} else {
						this.showIosKefu = false
					}
					if (!uni.getStorageSync('skendtime')) {
						let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 *
							1000 - 1); // 当天23:59
						uni.setStorageSync('skendtime', endTime)
					}
				}
			},
			handleAndrFirstBuy() {
				let req = {
					uid: uni.getStorageSync('uid'),
					vippackageid: this.firstBuyInfo.id
				}
				uni.showLoading({

				})
				this.$req.post('/shanghu/wechatpay', req).then((res) => {
					uni.hideLoading()
					let data = res.data
					if (data.code === 0) {
						let paydata = data.data
						this.firstPay(paydata)
					} else {
						wx.showToast({
							mask: true,
							icon: 'none',
							title: data,
							msg
						})
					}
				})
			},
			firstPay(paydata) {
				var that = this
				wx.requestPayment({
					nonceStr: paydata.nonceStr, // 随机字符串
					package: paydata.package, // 固定值
					signType: paydata.signType, // 统一下单订单号 
					timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
					paySign: paydata.sign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						uni.showToast({
							title: '购买成功'
						})
						this.andrFirstBuyPop = false

					},
					fail(e) {
						wx.showToast({
							mask: true,
							icon: '支付失败',
							title: data,
							msg
						})

						console.log(e, 8888)
					}
				})
			},
			handleRenew(row) {
				let req = {
					uid: uni.getStorageSync('uid'),
					vippackageid: row.id
				}
				uni.showLoading({

				})
				this.$req.post('/shanghu/wechatpay', req).then((res) => {
					uni.hideLoading()
					let data = res.data
					if (data.code === 0) {

						let paydata = data.data
						this.pay(paydata)
					} else {
						wx.showToast({
							mask: true,
							icon: 'none',
							title: data,
							msg
						})
					}
				})
			},
			pay(paydata) {
				var that = this
				wx.requestPayment({
					nonceStr: paydata.nonceStr, // 随机字符串
					package: paydata.package, // 固定值
					signType: paydata.signType, // 统一下单订单号 
					timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
					paySign: paydata.sign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						uni.showToast({
							title: '购买成功'
						})
						this.andrRenewBuyPop = false

					},
					fail(e) {
						wx.showToast({
							mask: true,
							icon: '支付失败',
							title: data,
							msg
						})

						console.log(e, 8888)
					}
				})
			},
			getTaocan(state) {
				let req = {
					uid: uni.getStorageSync('uid'),
					id: 2
				}
				this.$req.post('/web/vippackagelist', req).then((res) => {
					this.taocanList = res.data.data

				})
			},
			getTaocanImg() {
				this.$req.post('/web/vippackageimage', {
					id: 2,

				}).then((res) => {
					this.taocanimage = res.data.data
				})
			},
			getFirstBuyInfo() {
				this.$req.post('/web/vippackageinfo', {
					id: 2,
					uid: uni.getStorageSync('uid'),
					unionid: uni.getStorageSync('userInfo').unionid
				}).then((res) => {
					let info = res.data.data
					this.firstBuyInfo = info
				})
			},
			getma() {
				this.$req.post('/shanghu/kefuimage', {}).then((res) => {
					this.ma = res.data.data
				})
			},
			async haveAuth() {
				let res = await this.$req.post('/shanghu/userInfo', {
					uid: uni.getStorageSync('uid')
				})
				let res2 = await this.$req.post('/shanghu/shanghuInfo', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid
				})

				this.buyInfo = {
					auth: res.data.data,

				}
				return {
					auth: res.data.data,

				}
			},
			async authSave(data) {
				const info = wx.getSystemInfoSync()
				let res = await this.haveAuth()
				console.log('===', res)
				if (info.system.indexOf('Android') > -1) {
					if (res.auth.sk === 1 && res.auth.skinttime === 0) {
						this.andrFirstBuyPop = true
					} else if (res.auth.sk === 1 && res.auth.skinttime > 0) {
						this.andrRenewBuyPop = true
						this.getTaocan()
						this.getTaocanImg()
					} else {
						if (uni.getStorageSync('userInfo').shanghuid === 0) {
							uni.navigateTo({
								url: '/pages/iden/iden'
							})
							return
						}
						this.shoukuan()
					}
				} else {
					console.log(res.auth.wa, res.auth.wainttime)
					if (res.auth.sk === 1) {
						// ios授权手机
						this.showIosKefu = true
					} else {
						if (uni.getStorageSync('userInfo').shanghuid === 0) {
							uni.navigateTo({
								url: '/pages/iden/iden'
							})
							return
						}
						this.shoukuan()
					}


				}




			},
			async shoukuan() {

				let cdata = await this.$req.post('/shanghu/shanghuInfo', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid
				})
				let a = cdata.data.data

				if (!a.shh || !a.shname) {
					this.showPhonePop = true
					return
				}


				if (!this.price) {
					uni.showToast({
						icon: 'none',
						title: '请输入收款金额'
					})
					return
				}
				if (!this.baseInfo.id) {
					uni.showToast({
						icon: 'none',
						title: '商家不存在'
					})
					return
				}
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if (res.result) {
							uni.showLoading({
								title: '收款中'
							})

							if (res.result.indexOf('uid') != -1 && res.result.indexOf('yue') != -1) {
								let a = {}
								const paramsArr = res.result.split('&');
								paramsArr.forEach(param => {
									const [key, value] = param.split('=');
									a[key] = decodeURIComponent(value);
								})

								let req = {
									price: Number(that.price),
									shanghuid: that.baseInfo.id,
									uid: Number(a.uid)
								}
								that.$req.post('/shanghu/koufei', req).then((res) => {
									uni.hideLoading()
									if (res.data.code == 0) {
										uni.showToast({
											title: '收款成功'
										})
										that.getDataList()
									} else {
										uni.showToast({
											icon: 'none',
											title: '收款失败'
										})
									}
								})
							} else {
								let req = {
									price: Number(that.price),
									shanghuid: that.baseInfo.id,
									auth_code: res.result
								}
								that.$req.post('/shanghu/wechatpayfkm', req).then((res) => {
									uni.hideLoading()
									if (res.data.code == 0) {
										uni.showToast({
											title: '收款成功'
										})
										that.getDataList()
									} else {
										uni.showToast({
											icon: 'none',
											title: '收款失败'
										})
									}
								})
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: '条码内容不存在'
							})
						}
					}
				});
			},
			downSaveImage(imgurl) {
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.writePhotosAlbum']) {
							// 已授权，直接保存图片
							uni.downloadFile({
								url: imgurl,
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: '已保存到相册',
													duration: 2000,
												})
											},
											fail: function() {
												uni.showToast({
													title: '保存失败，请稍后重试',
													icon: 'none',
												})
											},
										})
									}
								},
							})
						} else if (res.authSetting['scope.writePhotosAlbum'] === false) {
							// 用户已拒绝授权，提示用户授权
							uni.showModal({
								title: '提示',
								content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success: function(res) {
												if (res.authSetting[
														'scope.writePhotosAlbum']) {
													uni.downloadFile({
														url: imgurl,
														success: (res) => {
															if (res
																.statusCode ===
																200) {
																uni.saveImageToPhotosAlbum({
																	filePath: res
																		.tempFilePath,
																	success: function() {
																		uni.showToast({
																			title: '已保存到相册',
																			duration: 2000,
																		})
																	},
																	fail: function() {
																		uni.showToast({
																			title: '保存失败，请稍后重试',
																			icon: 'none',
																		})
																	},
																})
															}
														},
													})
												}
											},
										})
									} else if (res.cancel) {
										uni.showToast({
											title: '您取消了授权',
											icon: 'none',
											duration: 2000,
										})
									}
								},
							})
						} else {
							// 用户第一次调用，调用授权接口
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.downloadFile({
										url: imgurl,
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath,
													success: function() {
														uni.showToast({
															title: '保存成功',
															duration: 2000,
														})
													},
													fail: function() {
														uni.showToast({
															title: '保存失败，请稍后重试',
															icon: 'none',
														})
													},
												})
											}
										},
									})
								},
								fail() {
									uni.showToast({
										title: '授权失败，请稍后重试',
										icon: 'none',
										duration: 2000,
									})
								},
							})
						}
					},
				})
			},
			handleSelectVip(data) {
				this.storeinfo = data
				this.cancelAdd()
			},
			clearPhone() {
				this.phone = ''
				this.initVipList()
			},
			phoneSearch() {
				this.initVipList()
			},
			initVipList() {
				this.currentPage = 1
				let req = {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					pageNo: this.currentPage,
					pageSize: this.pageSize,
					search: this.phone
				}
				this.$req.post('/shanghu/wallets', req).then((res) => {
					let data = res.data.data
					this.vipList = data.data
					this.totalPage = data.totalPage
					if (this.currentPage >= this.totalPage) {
						this.status = 'nomore'
					}
				})
			},
			loadVipList() {
				if (this.currentPage >= this.totalPage) return;
				this.status = 'loading'
				this.currentPage = ++this.currentPage
				let req = {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					pageNo: this.currentPage,
					pageSize: this.pageSize,
					search: this.phone
				}
				this.$req.post('/shanghu/wallets', req).then((res) => {
					uni.hideLoading()
					let data = res.data.data
					this.vipList = [...this.vipList, ...data.data]

					if (this.currentPage >= this.totalPage) {
						this.status = 'nomore'
					}
				})

			},
			handleShowPop() {
				this.searchflag = true
				this.initVipList()
			},
			handleSubmit() {

				if (!this.storeinfo) {
					uni.showToast({
						icon: 'none',
						title: '请选择会员'
					})
					return
				}
				if (!this.price) {
					uni.showToast({
						icon: 'none',
						title: '请输入金额'
					})
					return
				}
				let req = {
					uid: this.storeinfo.uid,
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					price: this.zhekoouPrice
				}
				uni.showLoading({
					mask: true
				})
				this.$req.post('/shanghu/koufei', req).then((res) => {
					uni.hideLoading()
					let info = res.data
					console.log(info)
					if (info.code === 0) {
						uni.showToast({
							title: '收款成功',
							mask: true
						})
						this.price = ''
						this.updataStore(req.uid)
					} else {
						uni.showToast({
							title: info.msg,
							icon: 'none'
						})
					}
				})

			},
			updataStore() {
				this.$req.post('/shanghu/walletinfo', {
					id: this.storeinfo.id
				}).then((res) => {
					let info = res.data.data

					this.storeinfo.price = info.price
				})
			},
			addInfo() {
				this.storeinfo = this.user
				this.cancelAdd()
			},
			cancelAdd() {
				this.searchflag = false
				this.user = null
				this.phone = ''

			},
			authSearchUser() {
				auth.getAuth('sk', 'skinttime', '', true, () => {
					this.handleShowPop()
				})

			},

			getStoreInfo() {
				this.$req.post('/shanghu/shanghuInfo', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid
				}).then(res => {
					this.baseInfo = res.data.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep .u-popup__content {
	// 	width: calc(100% - 80rpx);
	// }
	.phonePop2 {
		width: 70vw;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 30rpx 24rpx 30rpx 24rpx;
		min-height: 300rpx;

		.imgcont {

			width: 100%;
			margin: 0 auto;

			.img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.tit {
			font-size: 30rpx;
			font-weight: 500;
			flex-shrink: 0;
			text-align: center;
			flex: 1;
			padding-top: 20rpx;
		}

		.name {
			font-size: 28rpx;
			margin-top: 30rpx;
			flex: 1;
			padding: 0 20rpx;
		}

		.namecenter {
			text-align: center;
		}

		button {
			margin: 0;
			padding: 0;
			line-height: 35rpx;
			background-color: transparent;
		}

		button::after {
			border: none;
		}

		.footer-btn {
			flex-shrink: 0;
			padding-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.btn {
				line-height: 35rpx;
				width: calc(50% - 15rpx);
				padding: 20rpx;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				background-color: #f5f5f5;
			}

			.confirmbtn {
				background-color: #57bd6a;
				color: #fff;
			}
		}

		.btncenter {
			justify-content: center;
		}
	}

	.warpcont {
		flex-wrap: wrap;
		display: flex;
		background-color: #fff;
		padding: 30rpx 24rpx;
		border-radius: 12rpx;
		margin-top: 40rpx;

		.none {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.titcont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			width: 100%;
			padding-bottom: 20rpx;

			.left {

				font-weight: 500;
			}

			.right {
				color: #09f;
			}
		}

		.sklist {
			width: 100%;
		}

		.skitem {



			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #edf0f2;
			width: 100%;
			padding: 20rpx 0;

			&:last-child {
				border-bottom: none;
			}

			.item-top {
				display: flex;

				.top-left {
					flex-shrink: 0;
					width: 190rpx;
					height: 190rpx;
					border-radius: 8rpx;
					overflow: hidden;

					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.numcont {
					display: flex;
					padding-top: 20rpx;

					.citem {
						display: flex;
						margin-right: 30rpx;
						font-size: 26rpx;

						.label {
							color: #999;
						}
					}
				}

				.top-right {
					flex: 1;
					// padding-left: 40rpx;	

					.name {
						font-size: 28rpx;
						font-weight: 500;
					}

					.bot {


						.citem {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							margin-top: 20rpx;

							.label {
								color: #999;
							}
						}
					}


				}
			}

			.pricecont {
				.price {
					font-size: 32rpx;

					color: #ED2920;
				}
			}
		}
	}

	.rewBuyPop {
		width: 90vw;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 0 0 30rpx 0;
		height: 90vh;
		overflow: hidden;
		position: relative;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 2;
		}

		.top {
			flex: 1;
			overflow-y: auto;

			.tit {
				font-size: 30rpx;
				text-align: center;
				padding: 30rpx;
				font-weight: 500;
			}

			.imgcont {
				overflow: hidden;
				width: 100%;

				border-radius: 8rpx 8px 0 0;

				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}



			.name {
				font-size: 28rpx;
				margin-top: 30rpx;
				flex: 1;
				padding: 0 20rpx;
			}

			.cloum-cont {
				margin-top: 40rpx;
				padding: 0 24rpx;

				.cloum {
					display: flex;
					justify-content: space-between;
					border-radius: 8rpx;
					margin-bottom: 40rpx;
					// overflow: hidden;
					position: relative;
					align-items: center;

					.package-img {
						position: relative;
						z-index: 1;
						width: 100%;
					}

					.package-info {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 0 20rpx;
						font-size: 28rpx;
						position: absolute;
						left: 0;
						z-index: 2;
						color: #fff;
						align-items: center;
					}

					.tuijian-icon {
						position: absolute;
						right: 20rpx;
						z-index: 4;
						width: 70rpx;
						height: 70rpx;
						top: -26rpx;
					}

					.package-detail {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
					}

					.package-price {
						font-size: 40rpx;
						font-weight: bold;

						text {
							font-size: 24rpx;
							margin-right: 4rpx;
						}
					}

					.originalprice {
						margin-left: 20rpx;
						font-size: 22rpx;

						text {
							font-weight: bold;
							text-decoration: line-through;
						}
					}

					.package-name {
						font-size: 32rpx;
						margin-left: 20rpx;
					}

					.package-buy {
						color: #44c78d;
						font-size: 28rpx;
						margin-right: 36rpx;
					}

					.title-o {
						color: #ff9d5c
					}

					.left {}

					.right {
						display: flex;
						align-items: center;

						.price {
							color: #fa3534;
						}

						.yuan {
							padding-left: 10rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.footer-btn {
			padding-left: 24rpx;
			padding-right: 24rpx;
			flex-shrink: 0;
			padding-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.btn {
				line-height: 35rpx;
				width: calc(50% - 15rpx);
				padding: 20rpx;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				background-color: #f5f5f5;
			}

			.confirmbtn {
				background-color: #57bd6a;
				color: #fff;
			}
		}

		.btncenter {
			justify-content: center;
		}
	}

	.firstBuyPop {
		width: 90vw;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 0 0 30rpx 0;
		height: 90vh;
		overflow: hidden;
		position: relative;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 2;
		}

		.top {
			flex: 1;
			overflow-y: auto;

			.tit {
				text-align: center;
				padding: 30rpx;
				font-size: 30rpx;
				font-weight: 500;
			}

			.imgcont {
				overflow: hidden;
				width: 100%;

				border-radius: 8rpx 8px 0 0;

				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}



			.name {
				font-size: 28rpx;
				margin-top: 30rpx;
				flex: 1;
				padding: 0 20rpx;
			}

			.cloum-cont {
				margin-top: 40rpx;
				padding: 0 24rpx;

				.cloum {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 20rpx;
					font-size: 28rpx;
					border-radius: 8rpx;
					margin-bottom: 20rpx;
					border: 1px solid #edf0f2;

					.left {}

					.right {
						display: flex;
						align-items: center;

						.price {
							color: #fa3534;
						}

						.yuan {
							padding-left: 10rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}

		}

		.footer-btn {
			padding-left: 24rpx;
			padding-right: 24rpx;
			flex-shrink: 0;
			padding-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.btn {
				line-height: 35rpx;
				width: 100%;
				padding: 20rpx;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				background-color: #f5f5f5;
			}

			.confirmbtn {
				background-color: #57bd6a;
				color: #fff;
			}
		}

		.btncenter {
			justify-content: center;
		}
	}

	.phonePop {
		width: 90vw;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 30rpx 24rpx 30rpx 24rpx;
		min-height: 500rpx;

		.imgcont {

			width: 100%;
			margin: 0 auto;

			.img {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 8rpx 8px 0 0;
			}
		}

		.tit {
			font-size: 30rpx;
			font-weight: 500;
			flex-shrink: 0;
			text-align: center;
		}

		.name {
			font-size: 28rpx;
			margin-top: 30rpx;
			flex: 1;
			padding: 0 20rpx;
		}

		.namecenter {
			text-align: center;
		}

		button {
			margin: 0;
			padding: 0;
			line-height: 35rpx;
			background-color: transparent;
		}

		button::after {
			border: none;
		}

		.footer-btn {
			flex-shrink: 0;
			padding-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.btn {
				line-height: 35rpx;
				width: calc(50% - 15rpx);
				padding: 20rpx;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				background-color: #f5f5f5;
			}

			.confirmbtn {
				background-color: #57bd6a;
				color: #fff;
			}
		}

		.btncenter {
			justify-content: center;
		}
	}

	.selectbtn {
		height: 80rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #fff;
		width: 100%;
	}

	.add-box {

		padding: 30rpx 20rpx 10rpx 20rpx;

		.searchcont {
			display: flex;

			padding-right: 100rpx;

			.left-search {
				flex: 1;
				display: flex;
				// align-items: center;

				background-color: #f5f5f5;
				padding: 10rpx 0 10rpx 20rpx;
				border-radius: 12rpx;

				.clearcont {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 20rpx;
				}

			}

			.search-btn {
				margin-left: 10rpx;
				font-size: 26rpx;
				flex-shrink: 0;

				color: #fff;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				border-radius: 10rpx;
			}
		}

		.none {
			height: 600rpx;
			text-align: center;
			padding-top: 160rpx;
			color: #999;
		}

		.vip-cont {
			padding-top: 30rpx;

			.vip-list {
				padding: 0 20rpx;

				.vip-item {
					padding: 20rpx 0;
					border-bottom: 1px solid #edf0f2;

					.top {
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.sele {
							color: #09f;
						}

					}

					.middle {
						margin-top: 20rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;

						.mitem {
							width: 33.33%;
							text-align: center;
						}

						.num {
							text-align: left;
						}

						.price {
							color: #fa3534;
						}

						.kou {
							text-align: right;
						}

					}
				}
			}
		}
	}



	.zhekou {
		display: flex;
		width: 100%;
		padding-top: 30rpx;

		.label {
			color: #999;
			font-size: 28rpx
		}

		.val {}

		.red {
			font-size: 32rpx;
			font-weight: 500;
			color: #fa3534;
		}
	}

	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
		padding: 0 24rpx 40rpx 24rpx;
	}

	.one-info {
		background: #fff;
		width: 100%;
		padding: 20rpx 32rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.search-input {

		margin-left: 10rpx;
	}



	.info-title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		padding: 20rpx 0;
		border-bottom: 1px solid #edf0f2;

		&:last-child {
			border: none;
		}

		// color: #6f6e70;
		.label {
			color: #999;
			font-size: 28rpx;

		}

		.val {
			font-size: 30rpx;
			font-weight: 500;
		}
	}

	.store-name {
		margin-top: 40rpx;
	}

	.price-box {
		margin-top: 40rpx;

		input {
			font-size: 40rpx;
			margin-left: 20rpx;
		}
	}

	.pay-btn {
		width: 100%;
		height: 90rpx;
		border-radius: 100rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.pay-btn2 {
		width: 100%;
		height: 90rpx;
		border-radius: 100rpx;
		color: #fff;
		margin-top: 30rpx;
	}



	.input-box {
		background: #f6f6f6;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		font-size: 28rpx;
		height: 100rpx;
		padding: 0 20rpx;
	}

	.confirm-btn {
		width: 400rpx;
		color: #fff;
		font-size: 28rpx;
		height: 70rpx;
		margin-top: 40rpx;
		border-radius: 20rpx;
	}

	.search-info {
		width: 100%;
	}

	.info-box {
		padding: 0 20rpx;
		background: #fff;
	}

	.one-sel {
		background: #f5f7f9;
		color: #393b3d;
		width: 100%;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		justify-content: flex-start;
		border: #f5f7f9 solid 1px;
	}

	.sel-type {
		border: #57bd6a solid 1px;
		color: #000;
		background: rgba(#76bc7d, 0.2);
		position: relative;
	}

	.check-box {
		position: absolute;
		right: 20rpx;
	}

	.user-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.user-phone {
		font-size: 28rpx;
		color: #77787a;
	}

	.type-tag {
		color: #76bc7d;
		border: #76bc7d solid 1px;
		font-size: 24rpx;
		width: 140rpx;
		height: 50rpx;
		background: rgba(#76bc7d, 0.1);
		border-radius: 10rpx;
	}

	.type-two {
		color: #337bbd;
		border: #337bbd solid 1px;
		background: rgba(#337bbd, 0.1);
	}
</style>